<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX后台管理</title>
    <script src="js/jquery-3.2.1.js"></script>
    <script src="layui/layui.js"></script>
    <script src="layui/lay/modules/layer.js"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css">
</head>
<body>

<fieldset class="layui-elem-field">
    <legend>修改密码</legend>
    <div class="layui-field-box">
        <form style="width: 40%" class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">手机号码</label>
                <div class="layui-input-block">
                    <input type="text" name="manager_tel" required value="${manager.manager_tel}" disabled="disabled"
                           lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">短信验证码</label>
                <div class="layui-input-block" style="display: flex;justify-content: space-between">
                    <input type="text" name="phoneCode" required placeholder="请输入短信验证码" lay-verify="phoneCode"
                           placeholder="" autocomplete="off" class="layui-input">
                    <a style="width: 30%" id="updatePasswordSendPhoneCode" class="layui-btn">
                        发送验证码
                    </a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">旧密码</label>
                <div class="layui-input-block">
                    <input type="password" name="manager_password" required lay-verify="pass" placeholder="请输入旧密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="newPassword1" required lay-verify="pass" placeholder="请输入新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="newPassword2" required lay-verify="pass" placeholder="请重新输入新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formUpdatePassword">提交修改</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<hr class="layui-bg-cyan">
<fieldset class="layui-elem-field">
    <legend>修改手机号码</legend>
    <div class="layui-field-box">
        <form style="width: 40%" class="layui-form" action="">

            <div class="layui-form-item">
                <label class="layui-form-label">新手机号码</label>
                <div class="layui-input-block">
                    <input type="text" name="newPhone" required placeholder="请输入新的手机号码" lay-verify="phone"
                           placeholder="" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">短信验证码</label>
                <div class="layui-input-block" style="display: flex;justify-content: space-between">
                    <input type="text" name="phoneCode" required placeholder="请输入短信验证码" lay-verify="phoneCode"
                           placeholder="" autocomplete="off" class="layui-input">
                    <a style="width: 30%" id="updatePhoneNumSendPhoneCode" class="layui-btn">
                        发送验证码
                    </a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="manager_password" required lay-verify="pass" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formUpdatePhoneNum">提交修改</button>
                </div>
            </div>
        </form>
    </div>
</fieldset>
<hr class="layui-bg-cyan">
<fieldset class="layui-elem-field">
    <legend>更换头像</legend>
    <div class="layui-field-box">
        <form style="width: 40%" class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <img id="test1" style="border: solid #F0F0F0 1px;" width="80px" height="80px"
                         src="<#if manager.manager_photo??>${manager.manager_photo}</#if>">
                </div>
            </div>
        </form>
    </div>
</fieldset>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formUpdatePassword)', function (data) {
            // layer.msg(JSON.stringify(data.field));
            if ($("input[name=newPassword1]").val() != $("input[name=newPassword2]").val()) {
                layer.msg('两次密码不一致！', {icon: 5, anim: 6});
                $("input[name=newPassword2]").focus();
                $("input[name=newPassword2]").addClass("layui-form-danger");
                return false;
            }
            //提交
            $.ajax({
                type: "POST",
                url: "updateThisPassword",
                data: data.field,
                dataType: "json",
                success: function (res) {
                    if (res.code == -1) {
                        layer.msg(res.message, {icon: 5, anim: 6});
                    } else {
                        layer.confirm(res.message, {
                            btn: ['确定'] //可以无限个按钮
                        }, function (index, layero) {
                            //按钮【按钮一】的回调
                            window.location.reload();
                        });
                    }
                }
            });
            //
            return false;
        });
        form.on('submit(formUpdatePhoneNum)', function (data) {
            $.ajax({
                type: "POST",
                url: "updateThisPhoneNum",
                data: data.field,
                dataType: "json",
                success: function (res) {
                    if (res.code == -1) {
                        layer.msg(res.message, {icon: 5, anim: 6});
                    } else {
                        layer.confirm(res.message, {
                            btn: ['确定'] //可以无限个按钮
                        }, function (index, layero) {
                            //按钮【按钮一】的回调
                            window.location.reload();
                        });
                    }
                }
            });
            return false;
        });
        form.verify({
            pass: [
                /^[\S]{6,12}$/
                , '密码必须6到12位，且不能出现空格'
            ]
            , phoneCode: [
                /^[\S]{4}$/
                , '请输入正确的4位短信验证码'
            ]
        });
    });
</script>
<script>
    var flag = true;
    $("#updatePasswordSendPhoneCode").click(function () {
        if (flag) {
            $.ajax({
                type: "POST",
                url: "/login/sendPhoneCode",
                data: {manager_tel: $("input[name=manager_tel]").val()},
                dataType: "json",
                success: function (res) {
                    layer.msg(res.message);
                }
            });
            flag = false;
            var t = 10;
            $(this).addClass("layui-btn-disabled");
            var interval = setInterval(function () {
                $("#updatePasswordSendPhoneCode").html(t + "秒");
                console.log(t);
                if (t == 0) {
                    $("#updatePasswordSendPhoneCode").html("发送验证码");
                    $("#updatePasswordSendPhoneCode").removeClass("layui-btn-disabled");
                    flag = true;
                    clearInterval(interval);
                }
                t--;
            }, 1000);
        }
    });
</script>

<script>
    var flag = true;
    $("#updatePhoneNumSendPhoneCode").click(function () {
        if (flag) {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test($("input[name=newPhone]").val())) {
                layer.msg('请输入正确的11位手机号码！', {icon: 5, anim: 6});
                $("input[name=newPhone]").focus();
                $("input[name=newPhone]").addClass("layui-form-danger");
                return;
            }
            //
            $.ajax({
                type: "POST",
                url: "/login/sendPhoneCode",
                data: {manager_tel: $("input[name=newPhone]").val()},
                dataType: "json",
                success: function (res) {
                    layer.msg(res.message);
                }
            });
            //
            flag = false;
            var t = 10;
            $(this).addClass("layui-btn-disabled");
            var interval = setInterval(function () {
                $("#updatePhoneNumSendPhoneCode").html(t + "秒");
                console.log(t);
                if (t == 0) {
                    $("#updatePhoneNumSendPhoneCode").html("发送验证码");
                    $("#updatePhoneNumSendPhoneCode").removeClass("layui-btn-disabled");
                    flag = true;
                    clearInterval(interval);
                }
                t--;
            }, 1000);
        }
    });
</script>


<script>
    layui.use('upload', function () {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: 'opdateThisManagerPhoto' //上传接口
            , done: function (res) {
                //上传完毕回调
                layer.msg("上传成功！", {icon: 1});
                console.log(res.data.src);
                $("#test1").attr('src', res.data.src.toString());
                $("#topManagerPhoto", window.top.document).attr('src', res.data.src.toString());
            }
            , error: function () {
                layer.msg("上传失败！", {icon: 5});
            }
        });
    });
</script>

</body>
</html>